<template>
  <pages id="home">
    <pages-header slot="header" :back="false" :rightBtn="rightBtn">{{title}}</pages-header>
    <scroller ref="my_scroller" @getPosition="getPosition" @springback="springback" :on-refresh="refresh" :on-infinite="infinite" :defaultTop="y" :style="{
      opacity: opacity
    }">
      <span slot="before-load">{{restatus}}</span>
      <span slot="refresh-spinner">{{restatus}}11</span>
      <div v-for="(item, index) in items"
          class="row"
          :class="{'grey-bg': index % 2 == 0}"
          >
        {{ item }}
      </div>
    </scroller>
  </pages>
</template>

<script>
import {utils} from '@/App'
// console.log(abc)
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      title: '首页',
      items: [],
      x: 0,
      y: 0,
      timer: 0,
      opacity: 0,
      restatus: '下拉刷新',
    }
  },
  computed: {
    back() {
      return {
        template: '<i class="iconfont icon-return"></i>',
        tap: this._back
      }
    },
    rightBtn() {
      return [
        {
          template: `<i class="iconfont icon-prompt"></i>`,
          tap: this.prompt
        },
        {
          template: `<i class="iconfont icon-more"></i>`,
          tap: this.menu
        }
      ]
    },
  },
  methods: {
    _back(back) {
      console.log('这里是预处理事件，等待2秒后返回上一页')
      setTimeout(() => {
        back()
      }, 2000)
    },
    menu(e) {
      console.log('menu')
    },
    prompt(e) {
      console.log('prompt')
    },
    getPosition(position){
      let {left, top} = position
      this.x = left
      this.y = top
      if(this.y <= function() {
        const height = document.body.offsetWidth * .13
        return height - height * 2
      } () && this.$refs.my_scroller.touch)
        this.restatus = "松开刷新"
      else if(this.$refs.my_scroller.touch)
        this.restatus = "下拉刷新"
    },
    springback(time){
      setTimeout(() => {
        const position = this.$refs.my_scroller.getPosition()
        this.getPosition(position)
      },time)
    },
    refresh(done) {
      this.restatus = '刷新中'
      setTimeout(() => {
        this.restatus = '刷新成功'
        this.items = []
        for (let i = 1; i < 100; i++) {
          this.items.push(i + ' - keep walking, be 2 with you.')
        }
        done()
      }, 1500)
    },
    infinite(done){
      setTimeout(() => {
        for (let i = 1; i < 100; i++) {
          this.items.push(i + ' - keep walking, be 2 with you.')
        }
        done(true)
      }, 1500)
      return;
    },
  },
  mounted() {
    const abc = utils.createElement('be','.pages')
  },
  cache() {
    if(!this.status){
      for (let i = 1; i < 100; i++) {
        this.items.push(i + ' - keep walking, be 2 with you.')
      }
    }
    if(this.y < 0)
      this.y = 0;
    this.opacity = 0;
    setTimeout(() => {
      this.opacity = 1;
    },0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
